/* eslint-disable no-unused-vars */
import React, { memo, useState, useEffect } from "react";
import { useSelector, useDispatch, shallowEqual } from "react-redux";
import { View, Input, Text, Textarea, Image } from '@tarojs/components';
import { Icon, Stepper, Popup, Picker, Tag, Field } from "@antmjs/vantui";
import Taro, { useRouter } from '@tarojs/taro';
import { updateState } from "@/store/actions/global";
import axios from "@/axios";
import {
  getQiniuToken
} from "@/axios/api/qiniu";
import Authorization from "@/components/Authorization"
import Navbar from "@/components/Navbar"
import { chooseImage, uploadQiniu, createUUID } from '@/utils/utils';
import {
  addRecipe,
  getRecipeDetail,
  getRecipeMaterial,
  getRecipeStep,
} from "@/axios/api/recipe";
import { themeColor } from "../../utils/config";
import './index.less';

const Index = () => {
  const router = useRouter();
  const { recipe_id, type } = router.params;
  const { globalData } = useSelector(
    (state) => ({ globalData: state.globalData }),
    shallowEqual
  );
  const { isLogin, qiniuToken, userInfo } = globalData;
  const user_id = userInfo && userInfo.user_id;
  const dispatch = useDispatch();
  const [step, setStep] = useState(1);
  const [navbarTitle, setNavbarTitle] = useState('创建菜谱');
  const [data, setData] = useState({
    user_id: userInfo.user_id,
    title: "",
    image: "",
    material: [
      { material_index: 0, material_name: "", material_amount: 1, material_unit: "", name_focus: false, unit_focus: false },
      { material_index: 1, material_name: "", material_amount: 1, material_unit: "", name_focus: false, unit_focus: false }
    ],
    steps: [
      {
        step_index: 0,
        step_text: '',
        step_img: ''
      },
      {
        step_index: 1,
        step_text: '',
        step_img: ''
      }
    ],
    tip: "",
    cats: [],
    difficulty: 3,
  });
  const [current, setCurrent] = useState(null);
  const [requireText, setText] = useState("");
  const [canStep, setCanStep] = useState(true);
  const [canNext, setCanNext] = useState(false);
  const [adjust, setAdjust] = useState(false);
  const [showPicker, setShowPicker] = useState(false);
  const [showInput, setShowInput] = useState(false);
  const [guess] = useState([
    {
      key: '姜',
      amount: 1,
      value: '片'
    },
    {
      key: '蒜',
      amount: 1,
      value: '粒'
    },
    {
      key: '生抽',
      amount: 2,
      value: '勺'
    },
    {
      key: '盐',
      amount: 50,
      value: 'g'
    },
    {
      key: '鸡蛋',
      amount: 1,
      value: '只'
    },
  ]);
  const [difficulty] = useState([
    {
      id: 1,
      text: '非常简单',
      value: 1
    },
    {
      id: 2,
      text: '简单',
      value: 2
    },
    {
      id: 3,
      text: '普通',
      value: 3
    },
    {
      id: 4,
      text: '困难',
      value: 4
    },
    {
      id: 5,
      text: '非常困难',
      value: 5
    }
  ])
  const columnsData = ['适量', '毫升', '克', '勺', '个', '只', '片', '杯'];
  const [columns, setColumns] = useState(columnsData);
  const tipText = `1.好的标题是吸引厨友关注的第一步 \n 2.在标题中描述菜谱的特点，会吸引更多人点击。如“不用捏的饭团”、“不放油的红烧肉”`
  const tipUpload = ` +菜谱封面 \n 诱人的封面图是吸引厨友的关键`
  const handleStep = (value) => {
    if (value === 'next') {
      if (step < 5 && canNext) {
        setStep((d) => d + 1)
      }
    } else if (value === 'pre') {
      if (step > 1) {
        setStep((d) => d - 1)
      }
    } else if (value === 'publish' && canNext) {
      console.log(data);
      const text = type ? '修改' : '发布';
      Taro.showModal({
        title: '提示',
        content: `确定${text}这个菜谱吗？`,
        success: (res) => {
          if (res.confirm) {
            publish();
          } else if (res.cancel) {
          }
        }
      })
    }
  }
  const goHome = () => {
    Taro.switchTab({
      url: '/pages/index/index'
    })
  }
  const goBack = () => {
    Taro.navigateBack(
      {
        fail: () => {
          goHome();
        }
      }
    );
  }
  const publish = () => {
    Taro.showLoading({
      title: '发布中...',
      mask: true
    })
    axios.post(addRecipe, { recipeData: data, type,recipe_id }).then(res => {
      Taro.hideLoading();
      if (res.code === 200) {
        const text = type?'修改':'发布';
        Taro.showModal({
          title: '提示',
          content: `${text}成功`,
          showCancel: false,
          success: () => {
            goBack();
          }
        })
      } else {
        Taro.showModal({
          title: '提示',
          content: `发布失败，请重试`,
          showCancel: false,
        })
      }
    })
  }
  const onClickArrow = () => {
    const { type, recipe_id } = router.params;
    return new Promise(resovle => {
      if (!type && !recipe_id && data.title) {
        Taro.showModal({
          title: '提示',
          content: `需要保存为草稿吗？`,
          success: (res) => {
            if (res.confirm) {
              Taro.setStorageSync('draft', data);
            } else if (res.cancel) {
              Taro.setStorageSync('draft', null)
            }
          },
          complete: () => {
            resovle()
          }
        });
      } else {
        resovle()
      }
    })
  }
  const handleUpload = async (type, index) => {
    console.log(type, 'upload');
    if (type === 'cover') {
      try {
        let arr = await chooseImage(1, true);
        let url = await uploadQiniu(arr, qiniuToken, 'cover/');
        setData((pre => {
          return {
            ...pre,
            image: url,
          }
        }))
      } catch (err) {
        getQiniuConfig();
        Taro.showModal({
          title: '提示',
          content: `图片上传错误,请重新上传`,
          showCancel: false,
        })
        return
      }

    } else if (type === 'steps') {
      if (index === -1) {
        try {
          let arr = await chooseImage(9);
          let urls = await uploadQiniu(arr, qiniuToken, 'recipe/', {
            multi: true
          });
          setData(pre => {
            const { steps } = pre;
            for (const item of urls) {
              let index = steps.findIndex(s => !s.step_img);
              if (index !== -1) {
                steps[index].step_img = item;
              } else {
                let obj = {
                  step_index: createUUID(),
                  text: '',
                  step_img: item
                }
                steps.push(obj);
              }
            }
            return { ...pre }
          })
          console.log(urls);
        } catch (err) {
          getQiniuConfig();
          Taro.showModal({
            title: '提示',
            content: `${err},请重新上传`,
            showCancel: false,
          })
          return
        }

      } else {
        try {
          let arr = await chooseImage(1);
          let url = await uploadQiniu(arr, qiniuToken, 'recipe/');
          setData((pre => {
            const { steps } = pre;
            steps[index].step_img = url;
            return {
              ...pre,
            }
          }))
        } catch (err) {
          getQiniuConfig();
          Taro.showModal({
            title: '提示',
            content: `图片上传错误,请重新上传`,
            showCancel: false,
          })
          return
        }
      }
    }
  }
  const changeMaterial = (e, type, id) => {
    const { value } = e.detail;
    let input = value.split('\n');
    let inputVal = input[0] + (input[1] || "");
    if ((input.length > 1 && e.type === 'input') || e.type === 'confirm') {
      if (type === 'name') {
        setData(pre => {
          const { material } = data;
          material.map((item, index) => {
            item.name_focus = false;
            item.unit_focus = false;
            if (index === id) {
              item.name_focus = false;
              item.unit_focus = true;
              item.material_name = inputVal
            }
            return item
          })
          return { ...pre }
        })
      } else if (type === 'unit') {
        setData(pre => {
          const { material } = data;
          material.map((item, index) => {
            item.name_focus = false;
            item.unit_focus = false;
            if (index === id + 1) {
              item.name_focus = true;
            }
            if (index === id) {
              item.material_unit = inputVal;
            }
            return item
          })
          return { ...pre }
        })
      }
    } else if (e.type === 'blur') {
      if (type === 'name') {
        setData(pre => {
          const { material } = data;
          material.map((item, index) => {
            if (index === id) {
              item.name_focus = false;
            }
            return item
          })
          return { ...pre }
        })
      } else if (type === 'unit') {
        setData(pre => {
          const { material } = data;
          material.map((item, index) => {
            if (index === id) {
              item.unit_focus = false;
            }
            return item
          })
          return { ...pre }
        })
      }
    } else {
      if (type === 'name') {
        setData(pre => {
          const { material } = data;
          material.map((item, index) => {
            if (index === id) {
              item.material_name = inputVal;
            }
            return item
          })
          return { ...pre }
        })
      } else if (type === 'unit') {
        setData(pre => {
          const { material } = data;
          material.map((item, index) => {
            if (index === id) {
              item.material_unit = inputVal;
            }
            return item
          })
          return { ...pre }
        })
      }
    }

  }
  const pickerChange = (detail) => {
    if (current !== null) {
      setData(pre => {
        const { material } = data;
        const m = material[current];
        if (detail.value === '适量') {
          m.material_amount = null
        } else if (m.material_amount === null || m.material_amount <= 0) {
          m.material_amount = 1;
        }
        m.material_unit = detail.value;
        return { ...pre }
      })
    }
  }
  const onPopClose = () => {
    setCurrent(null);
    setShowPicker(false);
  }
  const getPickerData = () => {
    const { material } = data;
    let arr = []
    material.forEach(item => {
      if (item.material_amount && item.material_unit !== "") {
        arr.push(item.material_unit);
      }
    })
    arr = Array.from(new Set([...arr, ...columnsData,]));
    setColumns(arr);
  }
  const addMaterial = (material_name = "", material_amount = 1, material_unit = "", foucs = true) => {
    if (data.material.length >= 20) {
      Taro.showModal({
        title: '提示',
        content: `材料太多啦~精简一下菜谱吧`,
        showCancel: false,
      })
      return
    }
    setData(pre => {
      const { material } = pre;
      let obj = {
        material_index: new Date().getTime(),
        material_name,
        material_amount,
        material_unit,
        name_focus: foucs,
        unit_focus: false
      }
      let index = material.findIndex(item => !item.material_name);
      if (material_name && index !== -1) {
        material.splice(index, 1, obj);
      } else {
        material.push(obj);
      }
      return { ...pre };
    })
  }
  const delMaterial = (material_index) => {
    setData(pre => {
      const { material } = pre;
      let index = material.findIndex(item => item.material_index === material_index);
      material.splice(index, 1);
      return { ...pre }
    })
  };
  const adjustSort = (material_index, type) => {
    if (type === 'up') {
      setData(pre => {
        const { material } = pre;
        let index = material.findIndex(item => item.material_index === material_index);
        let temp = material[index];
        material[index] = material[index - 1];
        material[index - 1] = temp;
        return { ...pre }
      })
    } else if (type === 'down') {
      setData(pre => {
        const { material } = pre;
        let index = material.findIndex(item => item.material_index === material_index);
        let temp = material[index];
        material[index] = material[index + 1];
        material[index + 1] = temp;
        return { ...pre }
      })
    }
  }
  const addStep = () => {
    if (data.steps.length >= 20) {
      Taro.showModal({
        title: '提示',
        content: `步骤太多啦~精简一下菜谱吧`,
        showCancel: false,
      })
      return
    }
    setData(pre => {
      const { steps } = pre;
      let obj = {
        step_index: new Date().getTime(),
        step_text: '',
        step_img: ''
      }
      steps.push(obj);
      return { ...pre };
    })
  }
  const delStep = (step_index) => {
    setData(pre => {
      const { steps } = pre;
      let index = steps.findIndex(item => item.step_index === step_index);
      steps.splice(index, 1);
      return { ...pre }
    })
  }
  const stepInput = ({ detail }, index) => {
    setData(pre => {
      const { steps } = data;
      if (steps[index]) {
        steps[index].step_text = detail.value;
      }
      return { ...pre }
    })
  }
  const checkForm = () => {
    let flag = true;
    let text = ''
    if (!data.title) {
      flag = false;
      text = '请输入菜谱名称'
    }
    if (step === 1) {
      return { flag, text };
    }
    if (!data.image) {
      flag = false;
      text = '请上传封面'
    }
    if (step === 2) {
      return { flag, text };
    }
    data.material.forEach(item => {
      if (!item.material_name || item.material_name === '') {
        flag = false;
        text = '请输入材料';
      }
    })
    if (data.material.length < 2) {
      flag = false;
      text = '请至少添加两个材料'
    }
    if (step === 3) {
      return { flag, text };
    }
    data.steps.forEach(item => {
      if (!item.step_text || item.step_text === '') {
        flag = false;
        text = '请输入步骤说明';
      }
    })
    if (data.steps.length < 2) {
      flag = false;
      text = '请至少添加2个步骤'
    }
    if (step === 4) {
      return { flag, text };
    }
    return { flag, text };
  }
  const delTag = (id) => {
    setData(pre => {
      const { cats } = pre;
      let index = cats.findIndex(item => item.id === id);
      cats.splice(index, 1);
      return { ...pre }
    })
  }
  const removeRepeat = (arr) => {
    const hash = {};
    const newArray = arr.reduce((item, next) => {
      hash[next.value] ? '' : hash[next.value] = true && item.push(next);
      return item;
    }, [])
    return newArray
  }
  const addCat = ({ detail }) => {
    if (detail.value.trim()) {
      setData(pre => {
        let { cats } = pre;
        cats.push({
          id: new Date().getTime(),
          value: detail.value
        })
        cats = removeRepeat(cats);
        return {
          ...pre,
          cats,
        }
      })
    }
  }
  const getQiniuConfig = () => {
    axios
      .post(getQiniuToken)
      .then((res) => {
        const { data, code } = res;
        if (code === 200) {
          dispatch(updateState({ qiniuToken: data.uploadToken }))
        }
      });
  }
  const getDetail = () => {
    return new Promise(resovle => {
      axios
        .get(getRecipeDetail, { params: { recipe_id, user_id } })
        .then((res) => {
          const { data, code } = res;
          if (code === 200) {
            let { image, title, tip, category } = data;
            tip = tip.replaceAll('<br>', '\n');
            const cats = [];
            if (category) {
              category.split(',').forEach((item, index) => {
                cats.push({
                  id: index,
                  value: item
                })
              })
            }
            setData((pre => {
              return {
                ...pre,
                image, title, tip,
                cats,
              }
            }));
            resovle();
          }
        });
    })

  };
  const getMaterial = () => {
    return new Promise(resovle => {
      axios.get(getRecipeMaterial, { params: { recipe_id } }).then((res) => {
        const { data, code } = res;
        if (code === 200) {
          setData(pre => {
            return { ...pre, material: data.list }
          })
          resovle();
        }
      });
    })

  };
  const getStep = () => {
    return new Promise(resovle => {
      axios.get(getRecipeStep, { params: { recipe_id } }).then((res) => {
        const { data, code } = res;
        if (code === 200) {
          setData(pre => {
            return {
              ...pre,
              steps: data.list
            }
          });
          resovle()
        }
      });
    })
  };
  useEffect(() => {
    if (!isLogin) {
      dispatch(updateState({
        isShowGrant: true
      }))
    } else {
      getQiniuConfig();
      const draft = Taro.getStorageSync('draft');
      console.log({ type, recipe_id });
      if (type === '1' && recipe_id) {
        setNavbarTitle('编辑菜谱');
        Taro.showLoading({
          title: '请稍候...',
          mask: true
        })
        Promise.all([getDetail(), getMaterial(), getStep()]).then(result => {
          Taro.hideLoading()
        })
      } else if (draft) {
        Taro.showModal({
          title: '提示',
          content: `是否继续编辑上次未完成的菜谱？`,
          success: (res) => {
            if (res.confirm) {
              setData(draft);
            } else if (res.cancel) {
              Taro.setStorageSync('draft', null)
            }
          },
        })
      }
    }
  }, [isLogin, dispatch]);
  useEffect(() => {
    let { flag, text } = checkForm();
    setCanNext(flag);
    setText(text);
  }, [step, data])
  return (
    <View className='recipe-add'>
      <Authorization canClose={false}></Authorization>
      <Navbar title={navbarTitle} arrow='true' onClickArrow={onClickArrow}></Navbar>
      <View className='unitPop'>
        <Popup
          className='my-pop'
          show={showPicker}
          round
          position='bottom'
          onClose={onPopClose}
        >
          <View className='main'>
            <Picker
              columns={columns}
              defaultIndex={0}
              visibleItemCount={5}
              itemHeight={40}
              onChange={({ detail }) => {
                pickerChange(detail)
              }}
              onCancel={onPopClose}
              onConfirm={({ detail }) => {
                pickerChange(detail);
                onPopClose();
              }}
            ></Picker>
          </View>
        </Popup>
      </View>
      <View className='block'></View>
      {step === 1 &&
        <View className='step-01'>
          <View className='input-title'>
            <Input type='text' focus placeholder='写下你的菜谱名吧' maxlength='50' value={data.title} onInput={({ detail }) => {
              setData((d) => {
                return { ...d, title: detail.value };
              })
            }}
            />
            <View className='hr'></View>
          </View>
          <View className='tip'>
            <View className='top'>
              <Text>提示</Text>
            </View>
            <View className='tip-line'></View>
            <View className='content'>
              <Text>
                {tipText}
              </Text>
            </View>
          </View>
        </View>
      }
      {step === 2 &&
        <View className='step-02'>
          <View className='container'>
            <View className={data.image ? 'cover-image' : 'upload'} onClick={() => handleUpload("cover")}>
              {data.image ?
                <Image src={data.image} mode='widthFix'></Image>
                : <Text> {tipUpload}</Text>}
            </View>
          </View>
          <View className='title'>
            {data.title}
          </View>
          <View className='hr'></View>
        </View>
      }
      {step === 3 &&
        <View className='step-03'>
          <View className='container'>
            <View className='title'>材料</View>
            <View className='hr'></View>
            <View className='material-list'>
              <View className='item guess'>
                <View className='des'>猜你需要</View>
                <View className='group'>
                  {guess.map(item => {
                    let flag = data.material.findIndex(m => m.material_name === item.key)
                    if (flag === -1) {
                      return (
                        <View className='g-item' onClick={() => { addMaterial(item.key, item.amount, item.value, false) }}>
                          {item.key}
                        </View>
                      )
                    }
                  })}
                </View>
              </View>
              {data.material.map((item, index) => {
                return (
                  <View className='item' key={item.material_index}>
                    <View className='name'>
                      {adjust ?
                        <>
                          <Icon size='50' name='close' color='#ee0a24' className='del'
                            onClick={() => { delMaterial(item.material_index) }}></Icon>
                          <Text>{item.material_name}</Text>
                        </>
                        : <Textarea
                          maxlength='30'
                          focus={item.name_focus}
                          autoHeight
                          cursorSpacing={50}
                          disableDefaultPadding
                          value={item.material_name}
                          onInput={(e) => changeMaterial(e, 'name', index)}
                          onConfirm={(e) => changeMaterial(e, 'name', index)}
                          onFocus={() => {
                            const { material } = data;
                            material[index].name_focus = true;
                            setData(pre => {
                              return {
                                ...pre
                              }
                            })
                          }}
                          onBlur={(e) => {
                            changeMaterial(e, 'name', index)
                          }}
                          placeholder='材料(如:鸡蛋)'
                        />}
                    </View>
                    <View className='amount'>
                      {adjust ? <View className='adjust'  >
                        <View className='text'>{item.material_amount}{item.material_unit}</View>
                        <View className='up-down'>
                          {index !== 0 && <Icon size='40' name='down' className='up'
                            onClick={() => { adjustSort(item.material_index, 'up') }}></Icon>}
                          {index !== data.material.length - 1 && <Icon size='40' name='down' className='down'
                            onClick={() => { adjustSort(item.material_index, 'down') }}></Icon>}
                        </View>
                      </View>
                        :
                        <>
                          {item.material_amount && <Stepper
                            value={item.material_amount}
                            step={0.5}
                            max={999}
                            min={0}
                            asyncChange
                            onBlur={({ value }) => {
                              let num = Number(value);
                              num = parseFloat(num.toFixed(1));
                              if (num === 0) {
                                num = null;
                              }
                              setCanStep(true);
                              setData(pre => {
                                const { material } = pre;
                                material[index].material_amount = num;
                                return pre
                              })
                            }}
                            onFocus={() => {
                              setCanStep(false);
                            }}
                            onMinus={() => {
                              if (!canStep) {
                                return
                              }
                              setData(pre => {
                                const { material } = pre;
                                let num = material[index].material_amount - 0.5;
                                if (num <= 0) {
                                  num = null;
                                }
                                material[index].material_amount = num;
                                return { ...pre }
                              })
                            }}
                            onPlus={() => {
                              if (!canStep) {
                                return
                              }
                              setData(pre => {
                                const { material } = pre;
                                let num = material[index].material_amount + 0.5;
                                material[index].material_amount = num;
                                return { ...pre }
                              })
                            }}
                          />}
                          <View className='unit'>
                            <Textarea
                              maxlength='15'
                              value={item.material_unit}
                              focus={item.unit_focus}
                              autoHeight
                              cursorSpacing={50}
                              disableDefaultPadding
                              onInput={(e) => changeMaterial(e, 'unit', index)}
                              onConfirm={(e) => changeMaterial(e, 'unit', index)}
                              onFocus={() => {
                                const { material } = data;
                                material[index].unit_focus = true;
                                setData(pre => {
                                  return {
                                    ...pre
                                  }
                                })
                              }}
                              onBlur={(e) => {
                                changeMaterial(e, 'unit', index)
                              }}
                              placeholder='单位'
                            />
                          </View>
                          <Icon name='arrow-down' size='35' onClick={() => {
                            setCurrent(index);
                            getPickerData();
                            setShowPicker(true);
                          }}></Icon>
                        </>}
                    </View>

                  </View>
                )
              })}
              <View className='item control'>
                <View className='add' onClick={() => addMaterial()}><Text>增加一行</Text></View>
                <View className='adjust' onClick={() => {
                  setAdjust(pre => !pre)
                }}><Text>{adjust ? '调整完成' : '调整材料'}</Text></View>
              </View>
            </View>
            <View className='hr'></View>
          </View>
        </View>
      }
      {step === 4 &&
        <View className='step-04'>
          <View className='container'>
            <View className='title'><Text>做法</Text><Text onClick={() => handleUpload("steps", -1)}> 批量传图</Text></View>
            <View className='hr'></View>
            <View className='step-list'>
              {data.steps.map((item, index) => {
                return (
                  <View className='item' key={item.step_index}>
                    <View className='top'>
                      <View className='dec'><Text>步骤{index + 1}</Text>
                      </View>
                      <View className='delStep' onClick={() => { delStep(item.step_index) }}><Text>删除</Text></View>
                    </View>
                    <View className='image' onClick={() => handleUpload("steps", index)} >
                      {
                        item.step_img ?
                          <Image src={item.step_img} mode='aspectFill' />
                          :
                          <View className='image-tip'>
                            <Text> + 步骤图(可选)</Text>
                          </View>
                      }
                    </View>
                    <View className='step-input'>
                      <Textarea
                        maxlength='250'
                        autoHeight
                        cursorSpacing={50}
                        disableDefaultPadding
                        value={item.step_text}
                        onConfirm={(e) => stepInput(e, index)}
                        onBlur={(e) => {
                          stepInput(e, index)
                        }}
                        placeholder='请输入步骤说明'
                      />
                    </View>

                  </View>
                )
              })}
              <View className='item control'>
                <View className='add' onClick={() => addStep()}><Text>增加一步</Text></View>
              </View>
            </View>
            <View className='hr'></View>
          </View>
        </View>
      }
      {step === 5 &&
        <View className='step-05'>
          <View className='container'>
            <View className='title'><Text>小贴士</Text></View>
            <View className='tip-input'>
              <Textarea
                maxlength='400'
                autoHeight
                cursorSpacing={50}
                disableDefaultPadding
                value={data.tip}
                onConfirm={({ detail }) => {
                  setData(pre => {
                    return { ...pre, tip: detail.value }
                  })
                }}
                onBlur={({ detail }) => {
                  setData(pre => {
                    return { ...pre, tip: detail.value }
                  })
                }}
                placeholder='这道菜还有哪些需要注意的细节和小技巧？'
              />
            </View>
            <View className='title'><Text>烹饪难度</Text></View>
            <View className='difficulty'>
              {difficulty.map(item => {
                return (
                  <View key={item.id} className={`d-btn ${data.difficulty === item.value ? 'active' : ''}`}
                    onClick={() => {
                      setData(pre => {
                        return {
                          ...pre,
                          difficulty: item.value
                        }
                      })
                    }}
                  ><Text>{item.text}</Text></View>
                )
              })}
            </View>
            <View className='title'><Text>推荐分类</Text></View>
            <View className='cats'>
              {data.cats.map(item => {
                return (
                  <View className='tag'>
                    <Tag color='#ed5814' plain size="medium" closeable onClose={() => delTag(item.id)}>
                      {item.value}
                    </Tag>
                  </View>
                )
              })}
              <View className='add' onClick={() => {
                if (data.cats.length >= 5) {
                  Taro.showModal({
                    title: '提示',
                    content: `最多添加五个分类`,
                    showCancel: false,
                  })
                  return;
                }
                setShowInput(true)
              }}>
                <Icon name='add' color={themeColor} size={40}></Icon>
              </View>
            </View>
            <View className='hr'></View>
          </View>
        </View>
      }
      <View className='require'>
        {!canNext && step >= 2 && <Text>{requireText}</Text>}
      </View>
      <View className='bottom'>
        {step > 1 ? <View className='step-pre' onClick={() => handleStep('pre')}>
          <Text>上一步</Text>
        </View> : <View></View>}
        {step < 5 ? <View className='step-next' onClick={() => handleStep('next')} style={{ opacity: canNext ? 1 : .4 }}>
          <Text>下一步</Text>
        </View> : <View className='step-next' onClick={() => handleStep('publish')} style={{ opacity: canNext ? 1 : .4 }}>
            <Text>发布</Text>
          </View>}

      </View>

      <View>
        {showInput &&
          <View className='cat-input'>
            <View className='container'>
              <Input
                value=""
                placeholder='输入分类,最多6字'
                cursorSpacing={50}
                focus
                maxlength={6}
                onConfirm={(e) => { addCat(e) }}
                onBlur={() => {
                  setShowInput(false);
                }}
              />
            </View>
          </View>
        }
      </View>
    </View >
  )

}

export default memo(Index)

